<script setup lang="ts">
  import { PropType, ref, watch } from 'vue'
  import { CodeScanSetData } from '../../../types'
  import _ from 'lodash'

  const props = defineProps({
    sets: Object as PropType<Array<CodeScanSetData>>,
  })

  const emits = defineEmits<{
    (e: 'update', value: Array<CodeScanSetData>): void
  }>()

  // 数据源
  const sets = ref<Array<CodeScanSetData>>([])

  // 更新事件
  const onUpdate = () => {
    emits('update', _.cloneDeep(sets.value))
  }

  watch(
    () => props.sets,
    (value) => {
      sets.value = _.cloneDeep(value)
    },
    { deep: true, immediate: true },
  )
</script>

<template>
  <div>
    <template v-for="(set, index) in sets" :key="index">
      <el-card shadow="never">
        <div class="flex-justify-between">
          <el-input @input="onUpdate" v-model="set.name" style="width: 14vw" />
          <div class="flex-center-5">
            <el-switch @change="onUpdate" v-model="set.show" />
            <span v-if="set.show">显示</span>
            <span v-else>隐藏</span>
          </div>
        </div>
      </el-card>
    </template>
  </div>
</template>

<style scoped lang="scss">
  .flex-center-5 {
    display: flex;
    align-items: center;
    gap: 5px;
  }
</style>
